<template>
	<view class="container">
		<!-- 搜索框 -->
		<view class="shaerLin">
			<view class="input-view" >
				<view class="input-view-box">
					<input placeholder="请输入搜索关键字" v-model="data.keyword" />
					<uni-icons  type="search" size="22" style="margin-right: 20px;" color="#666666"  @click="serch()"/>
				</view>
			</view>
			<view class="switch" style="margin-left: 10px;">
        <up-icon name="list" color="#000" size="28" @click="switchImg" v-if="data.switPic==false"></up-icon>
        <up-icon name="grid" color="#000" size="28" @click="switchImg" v-if="data.switPic==true"></up-icon>

			</view>
		</view>
		<view class="header">
			<view class="item" v-for="(itme,index) in data.commodity" :key="index" @click="setSort(index)" >
				<view class="right" style="margin-right: 10upx;" >
					<text :class="data.sort==0&&index==0?'activity':''">{{itme.title}}</text>
				</view>
				<view class="left" v-if="itme.id==3">
					<uni-icons  :class="data.sort==3?'tops':''" type="top" size="10"></uni-icons>
					<uni-icons  :class="data.sort==4?'tops':''" type="bottom" size="10"></uni-icons>
				</view>
				<view class="left" v-if="itme.id==2">
					<uni-icons :class="data.sort==1?'tops':''" type="top" size="10"></uni-icons>
					<uni-icons :class="data.sort==2?'tops':''" type="bottom" size="10"></uni-icons>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="list" v-if="data.switPic==true">
				<view class="goodsbox" v-for="(items,index) in data.list" :key="index" @click="$goURl(`/pages/commodity/details?id=${items.ID}`)">
					<view class="goods" >
						<image :src="items.img" mode=""></image>
						<view class="right">
							<view class="name">
								{{items.name}}
							</view>
							<view class="box">
								<view class="price">
									￥{{items.price}}
									<!-- <image src="https://pubuimg.cqguanjie.cn/chat/16945909171691"></image> -->
								</view>
                <view class="markets">
                  <text>已售</text>
                  <text>{{items.sales}}</text>
                  <text>件</text>
                </view>
							</view>
<!--							<view class="box">-->
<!--								<view class="market">-->
<!--&lt;!&ndash;									￥{{items.market}}&ndash;&gt;-->
<!--								</view>-->
<!--								<view class="markets">-->
<!--									<text>已售</text>-->
<!--									<text>{{items.sales}}</text>-->
<!--									<text>件</text>-->
<!--								</view>-->
<!--							</view>-->
						</view>
					</view>
				</view>
			</view>
			<view class="listMdd" v-else>
				<view class="goodsbox" v-for="(items,index) in data.list" :key="index" @click="$goURl(`/pages/commodity/details?id=${items.ID}`)">
					<image class="goodsImg" :src="items.img" mode=""></image>
					<view class="goodsShop">
						<view class="name">{{items.name}}</view>
            <view class="l_f_r_sb_c">
              <view class="box">
                <text>￥{{items.price}}</text>
                <!-- <image src="https://pubuimg.cqguanjie.cn/chat/16945909171691"></image> -->

              </view>
              <view class="boxs">
                <view class="markets">
                  <text>已售</text>
                  <text>{{items.sales}}</text>
                  <text>件</text>
                </view>
              </view>
            </view>

<!--						<view class="boxs">-->
<!--              <view></view>-->
<!--&lt;!&ndash;							<text class="market">￥{{items.market}}</text>&ndash;&gt;-->
<!--							<view class="markets">-->
<!--								<text>已售</text>-->
<!--								<text>{{items.sales}}</text>-->
<!--								<text>件</text>-->
<!--							</view>-->
<!--						</view>-->
					</view>
				</view>
			</view>
		<empty v-if="data.list.length==0"></empty>
		</view>
	</view>
</template>

<script setup>
	import {ref,reactive,getCurrentInstance} from "vue";
	import {onReachBottom,onShow,onLoad} from '@dcloudio/uni-app';
	const {proxy} = getCurrentInstance();
	const data =reactive({
		commodity:[
			{title:'综合',id:1},
			{title:'销量',id:2},
			{title:'价格',id:3},
			// {title:'筛选',id:4},
		],
		navigation:'1',			//保存导航ID
		page: 0,
		pages: 1,
		size: 20,
		list: [],		//商品
		sort:0,			//商品排序
		switPic:true,		//切换商品布局
		keyword:'',
		id:''
	})
	onLoad((option)=>{
		try{
			data.keyword=option.keyword?option.keyword:''
		}catch(e){
			//TODO handle the exception
		}
		try{
		data.id=option.id?option.id:''
		}catch(e){
			//TODO handle the exception
		}
	})
	onShow(() => {
		// 业务逻辑
		getgoods()
	})

	onReachBottom(() => {
		// 业务逻辑

		getgoods()
		console.log('业务逻辑')
	})

	function setSort(index){
		if(index==0&&data.sort!=0){
			data.sort=index
		}else if(index==1&&(data.sort<1||data.sort>2)){
			data.sort=1
		}else if(index==1){
			if (data.sort==1){
				data.sort=2
			}else{
				data.sort=1
			}
		}else if(index==2&&(data.sort<3)){
			data.sort=3
		}else if(index==2){
			if (data.sort==3){
				data.sort=4
			}else{
				data.sort=3
			}
		}
		serch()
	}
	function serch(){
		data.page = 0
		data.pages = 1
		data.list=[]
		getgoods()
	}
	// 点击切换格式
	function switchImg(){
		if(data.switPic == true){
			data.switPic = false
		}else{
			data.switPic = true
		}
	}
	// 点击导航栏
	function navigationClick(id){
		pageList()
		data.navigation = id
		if(id==1){
			data.sort = 0
			getgoods(data.sort)
		}else if(id==2){
			data.sort = 1
			getgoods(data.sort)
		}
	}
	// 排序
	function orderClick(e){
		pageList()
		data.sort = e
		getgoods(data.sort)
	}

	// 获取商品
	function getgoods(sort){
		let sorts = ''
		if(sort){
			sorts = sort
		}else{
			sorts = data.sort
		}
		if(data.page<data.pages){
			data.page++

			proxy.$request({
				url:`api/goods_list_all/${0}/?page=${data.page}&size=${data.size}&sort=${sorts}&keyword=${data.keyword}`,
				method:'get',
				data:{
					page:data.page,
					size:data.size
				},
				success:(res)=>{
					res.data.data.forEach(item=>{
						data.list.push(item)
					})
					console.log('list',data.list)
					data.pages = Math.ceil(res.data.total / data.size)
					if (data.pages) {
						if(data.page==data.pages){
							data.loadmore = "nomore"
						}else{
							data.loadmore = "loading"
						}
					}else{
						data.loadmore = "nomore"
					}
				}
			})

		}

	}
	function pageList(){
		data.page = 0
		data.pages = 1
	}
</script>

<style lang="scss" scoped>
	$nav-height: 30px;
	$paddings:10px;
	.container{
		width: 100%;
		// background-color: #fff;
		.shaerLin{
			background-color: #fff;
			display: flex;
			align-items: center;
			.input-view {
				width: 85%;
				background-color: rgb(246, 249, 255);
				height: $nav-height;
				border-radius: 30px;
				padding: 8upx 0;
				padding-right: 0;
				line-height: $nav-height;
				overflow: hidden;
				margin-left: 20px;
				.input-view-box {
					display: flex;
					justify-content: space-between;
					input {
						height: $nav-height;
						line-height: $nav-height;
						/* #ifdef APP-PLUS-NVUE */
						width: 370rpx;
						/* #endif */
						padding: 0 20px;
						font-size: 16px;
						color: #9f9f9f;
					}
				}
			}
			.switch{
				width: 15%;
				text-align: center;
				image{
					width: 19px;
					height: 19px;
				}
			}
		}

		.header{
			padding: 30upx;
			background-color: #fff;
			display: flex;
			justify-content: space-around;
			.item{
				display: flex;
				.right{
					font-weight: 700;
					font-size: 16px;
				}
				.left{
					display: flex;
					flex-direction: column;
					margin-right: 10upx;
					align-items: center;
				}
			}
		}
		.content{
			width: 100%;
			padding: 10upx 0;
			.list{
				width: 94%;
				margin: 0 auto;
				.goodsbox{
					margin-top: 10upx;
					border-radius: 10upx;
					background-color: #fff;
					.goods{
						display: flex;
						margin-bottom: 20upx;
						padding: 20px;
						image{
							width: 200upx;
							height: 200upx;
							border-radius: 30upx;
							margin-right: 30upx;
						}
						.right{
							display: flex;
							flex-direction: column;
							justify-content: space-around;
							width: calc(100% - 230upx);
							.name{
								color: #333333;
								font-size: 32upx;
								font-weight: bold;
							}
							.num{
								color: #999999;
								font-size: 24upx;
								display: flex;
								justify-content: space-between;
								align-items: center;
							}
							.box{
								display: flex;
								align-items: center;
								justify-content: space-between;
								font-size: 24upx;
								.price{
									color: $color1;
									font-size: 36upx;
								}
								.market{
									color: #999999;
									text-decoration: line-through;
								}
								.markets{
									color: #999999;
								}
								image{
									width: 33px;
									height: 14px;
								}
							}

						}
					}

				}
			}
			.listMdd{
				width: 94%;
				margin: 10px auto;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				.goodsbox{
					width: 48%;
					background-color: #fff;
					border-radius: 10px;
					margin-bottom: 30upx;
					.goodsImg{
						width: 100%;
						height: 186px;
						border-radius: 10px;
					}
					.goodsShop{
						padding: $paddings;
						.name{
							font-size: 15px;
							font-weight: 700;
              height: 120rpx
						}
						.box{
							margin: 4px 0;
							text{
								color: $color1;
								font-size:17px;
								margin-right: 10px;
								font-weight: 700;
							}
							image{
								width: 33px;
								height: 14px;
							}
						}
						.boxs{
							display: flex;
							justify-content: space-between;
							.market{
								color: #999999;
								text-decoration: line-through;
								font-size: 13px;
							}
							.markets{
								color: #999999;
								font-size: 13px;
							}
						}
					}

				}
			}
		}
	}
	::v-deep .uni-icons{
		font-weight: 700;
	}
	.activity{
		color: $color1;
	}
	.tops{
		color: red !important;
	}
</style>
